<template>
  <div>
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>创建新客专享活动</span>
        </div>
      </div>
      <div class="mar_t20 flex-bet flex-y-top">
        <div class="flex-g-1">
          <el-form ref="form" :model="form" label-width="180px">
            <el-form-item label="活动名称" prop="name" :required="true">
              <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-date-picker v-model="timeData" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['08:00:00', '20:00:00']"></el-date-picker>
            </el-form-item>
            <!--                        <el-form-item label="选择人群">-->
            <!--                            <el-radio-group v-model="form.people">-->
            <!--                                <el-radio label="1" disabled>全部人群</el-radio>-->
            <!--                                <el-radio label="2" disabled>新客</el-radio>-->
            <!--                            </el-radio-group>-->
            <!--                        </el-form-item>-->
            <el-form-item label="新人礼包">
              <div class>
                <div class="mar_t10">
                  <div class="mar_lr10">
                    <el-checkbox-group v-model="form.isCoupon">
                      <el-checkbox true-label="1" false-label="2">赠送优惠券</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div v-show="form.isCoupon=='1'" class="flex">
                    <el-select v-model="form.coupon" multiple filterable placeholder="请选择优惠券">
                      <el-option v-for="item in comgrouping" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                    <!--                                <div class="numberInput">-->
                    <!--                                    <el-input-number v-model="form.money" class="moneeyIpnut mar_l10"-->
                    <!--                                                     controls-position="right" :min="1"-->
                    <!--                                                     :max="99999999"></el-input-number>-->
                    <!--                                </div>-->
                    <!--                                <span class="mar_l10">张</span>-->
                  </div>
                </div>
                <div class="t_l numberInput">
                  <div class="mar_lr10">
                    <el-checkbox-group v-model="form.isBalance">
                      <el-checkbox true-label="1" false-label="2">赠送余额</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div v-show="form.isBalance=='1'">
                    <el-input-number v-model="form.balance" controls-position="right" :min="0.01" :max="99999999" class></el-input-number>
                    <span class="mar_l10">元</span>
                  </div>
                </div>
                <div class="mar_t10 t_l numberInput">
                  <div class="mar_lr10">
                    <el-checkbox-group v-model="form.isIntegral">
                      <el-checkbox true-label="1" false-label="2">赠送积分</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div v-show="form.isIntegral=='1'">
                    <el-input-number v-model="form.integral" controls-position="right" :min="1" :max="99999999" class></el-input-number>
                    <span class="mar_l10">积分</span>
                  </div>
                </div>
                <div class="mar_t10 t_l numberInput">
                  <div class="mar_lr10">
                    <el-checkbox-group v-model="form.isGrowth">
                      <el-checkbox true-label="1" false-label="2">赠送成长值</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div v-show="form.isGrowth=='1'">
                    <el-input-number v-model="form.growth" controls-position="right" :min="1" :max="99999999" class></el-input-number>
                    <span class="mar_l10">成长值</span>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="弹窗背景图">
              <div class="uploadSource bor_de rel flex" v-if="form.icon">
                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                  <i class="el-icon-check" ref="imgicon1"></i>
                  <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
                </label>
                <img :src="form.icon" @click="test(1)" class="wid" />
              </div>
              <div class="uploadSource flex-center curs" v-else @click="test(1)">
                <i class="el-icon-plus fon_40 color_d9"></i>
              </div>
              <div class="yb_margin">建议尺寸：562*838</div>
            </el-form-item>
          </el-form>
        </div>
        <div class="flex-g-0 pad_lr_20">
          <div class="fon_16">常见问题</div>
          <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
            <el-collapse-item title="什么是新客专享？" name="1">
              <div>针对新用户首次进入小程序获得的新用户礼包。</div>
            </el-collapse-item>
            <el-collapse-item title="为什么要做新客专享活动？" name="2">
              <div>新客专享</div>
            </el-collapse-item>
            <el-collapse-item title="哪些用户可以享受到新客专享礼包" name="3">
              <div>首次进入小程序并登录的用户，每个用户有且只能获得一次礼包</div>
            </el-collapse-item>
          </el-collapse>
          <div class="fon_16 mar_t20">活动规则</div>
          <div class="color_9 mar_t10 lh30 fon_13">
            <div>1.活动仅限在线支付订单；</div>
            <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">立即创建</el-button>
    </div>
    <attachment-img ref="img1" type="img" @attachment="imgadd1"></attachment-img>
  </div>
</template>
<script>
import { postSaveNew, getSaveNew } from '@/api/plug';
import { getSelectCoupon } from '@/api/user';
import { changeDate } from '@/utils/index';
import attachmentImg from '@/plugins/attachment-img';

export default {
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.edit();
    }
    this.getSelectCoupon();
  },
  components: { attachmentImg },
  data() {
    return {
      form: {
        name: '',
        // people: '1',
        isBalance: '2',
        isIntegral: '2',
        isGrowth: '2',
        isCoupon: '2',
        balance: '',
        integral: '',
        growth: '',
        icon: '',
        coupon: []
      },
      comgrouping: [],
      timeData: [new Date(), new Date().setMonth(new Date().getMonth() + 3)],
      collapseName: ''
    };
  },
  methods: {
    async getSelectCoupon() {
      const { data } = await getSelectCoupon();
      this.comgrouping = data ? data : [];
    },
    async edit() {
      const { data } = await getSaveNew({ id: this.id });
      this.form2 = this.form;
      this.form = Object.assign(this.form2, data);
      if (data.startTime) {
        this.timeData = [data.startTime, data.endTime];
      }
    },
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none';
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block';
    },
    test(i = 0) {
      console.log(this.$refs, i);
      this.$refs['img' + i].dialogVisible = true;
    },
    imgadd1(url) {
      this.form.icon = url.str;
    },
    deleteMultiImage(item, index, type) {
      //typem没传是单图multigraph多图；index上传图片组件排序
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (type == 'multigraph') {
        switch (index) {
          case 2:
            this.form2.environment.remove(item);
            break;
        }
      } else {
        switch (index) {
          case 1:
            this.form.icon = '';
            break;
        }
      }
    },
    async submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          if (this.timeData) {
            this.form.startTime = changeDate(this.timeData[0]);
            this.form.endTime = changeDate(this.timeData[1]);
          }
          const { msg } = await postSaveNew(this.form);
          this.$baseMessage(msg, 'success');
          this.$router.go(-1);
        } else {
          return false;
        }
      });
    }
  }
};
</script>
